<template>
    <div class="edit">
        <h2 class="my-big-font">编辑商品说明文档</h2>
        <div style="margin-top:20px;" class="edit-content">
            <div class="content-one">
                <span class="content-left">名称</span>
                <input v-model="rightsExplain.explainsName">
            </div>
            <div class="content-add">
                <span class="content-left">类别</span>
                <el-select  @change="changeType()" v-model="rightsExplain.type" placeholder="请选择类别" clearable>
                    <el-option v-for="item in categoryOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                </el-select>
            </div>
            <div class="content-add">
                <span class="content-left">品牌</span>
                <el-select @change="changeShopType()" v-model="rightsExplain.pid" placeholder="请选择品牌" clearable>
                    <el-option v-for="item in brandOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                </el-select>
            </div>
            <div class="content-add">
                <span class="content-left">标题</span>
                <el-select v-model="rightsExplain.shopId" placeholder="请选择标题" clearable>
                    <el-option v-for="item in titleOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                </el-select>
            </div>
            <div class="content-two">
                <span class="content-left">内容</span>
                <textarea style="resize:none;" v-model="rightsExplain.explains"></textarea>
            </div>
            <div class="content-th">
                <span class="content-left"></span>
                <span class="my-btn" @click="SubmitEditData">提交</span>
                <span class="my-btn" @click="goIllustrate">返回</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            rightsExplain: {
              id: '',
              explainsName: '',
              //商品类别值
              type: '',
              //品牌值
              shopId: '',
              // 标题值
              title: '',
              //内容
              explains: ''
            },
            //商品类别
            categoryOptions: [
              {
                id: '1',
                name: '话费充值'
              },
              {
                id: '2',
                name: '权益说明'
              }
            ],
            // 品牌
            brandOptions: [],
            // 标题
            titleOptions: [],
        }
    },
    mounted(){
        this.rightsExplain.id=this.$route.query.id
        this.getbrandOptions()
        this.editOne()
    },
    methods:{
        //返回
        goIllustrate(){
            this.$router.push('/index/illustrate')
        },
        //获取品牌名称
        getbrandOptions(){
          this.axios.post('/recharge/sys/vipshop/pnames?categoryId='+this.rightsExplain.type).then(res=>{
            this.brandOptions=res.data.data
          })
        },
        changeType(){
            this.rightsExplain.pid=''
            this.rightsExplain.shopId=''
            this.getbrandOptions()
        },
        //获取品牌id--查询商品类别名称
        changeShopType(){
            this.rightsExplain.shopId=''
            this.getTitleOptions(this.rightsExplain.pid);
        },
        //获取商品类别名称
        getTitleOptions(pid){
          this.axios.get('/recharge/sys/vipshop/getPrice?id='+pid).then(res=>{
            this.titleOptions=res.data.data
          })
        },
        editOne(){
            this.axios.post('/recharge/sys/rightsexplain/info/'+this.rightsExplain.id).then(res=>{
                this.rightsExplain=res.data.rightsExplain
                this.getTitleOptions(this.rightsExplain.pid);
            })
        },
        //提交说明文档数据
        SubmitEditData(){
            this.titleOptions.forEach(e=>{
                if(e.id==this.rightsExplain.shopId){
                    this.rightsExplain.title=e.name
                }
            })
            this.axios.post('/recharge/sys/rightsexplain/update',this.rightsExplain).then(res=>{
                if(res.data.data==true){
                  alert("修改成功")
                  this.$router.push('/index/illustrate')
                }else{
                  alert("修改失败")
                }
            })
        }
    }
}
</script>

<style scoped>
.edit{
    padding: 30px 82px 50px 30px;
    background: #fff;
    margin: 10px 0 0 10px;
    color: #333333;
    min-height: calc(100vh - 96px);
}
.edit h2{
    padding-top: 0;
}
/* 内容 */
.content-one input{
    border: 1px solid #ddd;
    height: 35px;
    width: 210px;
    overflow: hidden;
    font-size: 14px;
    color: #666;
    padding-left: 15px;
    border-radius: 4px;
}
.content-add{
    margin-top: 20px;
}
.content-two{
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
}
.content-left{
    display: inline-block;
    width: 60px;
}
.content-th{
    margin-top: 30px;
}
.content-th>span:last-child{
    background: #fff!important;
}
/* 文本域 */
textarea{
    width: 100%;
    height: 300px;
    border-color:#ddd!important;
    padding: 10px 20px;
    outline: 0;
}
</style>